// useMemo创建计算属性类似vue中的计算属性
import React, { useState, useEffect, useMemo } from 'react';

import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';


// sass
import style from './style/COCdetails.module.scss'
import TextDiv from './TextDiv';
import CardBox from '../CardBox';

// 仓库派发任务以及状态
import { useSelector, useDispatch } from 'react-redux'
// 任务类型以及状态类型
import type { StoreState, StoreDispatch } from '../../store'
// 真正派发的任务
import {details} from '../../store/modules/cost/cost'

// 动态路由信息
import { useParams } from 'react-router-dom'

import monent from 'moment'


interface DataType {
  number: number;
  entryname: string;
  price: number;
  quantity: number;
  total: number;
}



function COCdetails() {

    // 动态id
    const params = useParams();
    const id = params!.id

    // 仓库状态
    const {cost:{costdetails}} = useSelector((state: StoreState)=>state)
    const userdata = (costdetails as any).visitUserID
    const visitdata = (costdetails as any).visitObjID
    const costdata = (costdetails as any)
    console.log('costdetails', costdetails);
    

    // 任务派发
    const dispatch: StoreDispatch = useDispatch();


    //mount
    useEffect(() => {
        dispatch(details({ id }))
        
    },[dispatch])
    
    
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            dataIndex: 'number',
            key: 'number',
        },
        {
            title: '项目名称',
            dataIndex: 'entryname',
            key: 'entryname',
        },
        {
            title: '单位(元)',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '数量',
            dataIndex: 'quantity',
            key: 'quantity',
        },
        {
            title: '小计(元)',
            dataIndex: 'total',
            key: 'total',
            
        },
    ];
    let data: DataType[] = visitdata?.address;
    data = data?.map((item, index) => {
        return {...item,number:index+1}
    })


    // 总价计算属性
    let Allprice = useMemo(() => {
        let sum = 0
        data?.forEach((priceitem) => {
            sum = sum + priceitem.price
        })
        return sum
        
    },[data])

    let time = useMemo(() => {
        let timenumber = monent(costdata.time).format("YYYY-MM-DD h:mm:ss")  
        return timenumber
    },[costdata])

    return (
        <>
            {
                userdata ?
                <div>
                    <div className={ style.top}>
                        <div className={ style.blueBox}></div>
                        <span>订单详情</span>
                    </div>
                    {/* 患者信息 */}
                    <CardBox title='患者信息'>
                        <div className={ style.BigBox }>
                            <div className={style.TextDivBox}>
                                <TextDiv title='患者姓名'>{userdata.username}</TextDiv>
                                <TextDiv title='证件类型'>{userdata.IDcardtype}</TextDiv>
                                <TextDiv title='微信昵称'>{userdata.wxname}</TextDiv>
                            </div>
                            <div className={style.TextDivBox}>
                                <TextDiv title='就诊卡号'>{userdata.visitID}</TextDiv>
                                <TextDiv title='证件号码'>{userdata.IDcartnumber}</TextDiv>
                                <TextDiv title='手机号码'>{userdata.tel}</TextDiv>
                            </div>
                            <div className={style.TextDivBox}>
                                <TextDiv title='患者头像' isImg={true}>{ userdata.avatar }</TextDiv>
                                <TextDiv title='关系'>{ userdata.about }</TextDiv>
                            </div>
                        </div>
                    </CardBox>
                    {/* 就诊信息 */}
                    <CardBox title='就诊信息'>
                        <div className={ style.BigBox }>
                            <div className={style.TextDivBox}>
                                <TextDiv title='就诊医院'>{ visitdata.Hospital}</TextDiv>
                                <TextDiv title='就诊医生'>{ visitdata.Doctor}</TextDiv>
                                <TextDiv title='费用类型'>{ visitdata.Business }</TextDiv>
                            </div>
                            <div className={style.TextDivBox}>
                                <TextDiv title='医院地址'>{visitdata.Hospitaladdress }</TextDiv>
                                <TextDiv title='医生职称'>{ visitdata.Doctorjob}</TextDiv>
                            </div>
                            <div className={style.TextDivBox}>
                                <TextDiv title='就诊科室'>{ costdata.Department}</TextDiv>
                                <TextDiv title='业务类型'>{ visitdata.Costtype}</TextDiv>
                            </div>
                            <div className={style.TextDivBox}>
                                <TextDiv title='费用明细'></TextDiv>
                                <div className={ style.custom }>
                                    {/* 表格 */}
                                    <Table
                                        columns={columns}
                                        dataSource={data}
                                        pagination={false}
                                        style={{width:'800px'}}
                                    />
                                </div>
                            </div>
                        </div>
                    </CardBox>
                    {/* 订单信息 */}
                    <CardBox title='订单信息'>
                        <div className={ style.BigBox }>
                            <div className={style.TextDivBox}>
                                <TextDiv title='订单总额'>{ Allprice+' (元)'}</TextDiv>
                                <TextDiv title='订单状态'>{ costdata.Paymentstatus}</TextDiv>
                            </div>
                            <div className={style.TextDivBox}>
                                <TextDiv title='支付方式'>{ costdata.uocost}</TextDiv>
                                <TextDiv title='订单编号'>{ costdata.orderId}</TextDiv>
                            </div>
                            <div className={style.TextDivBox}>
                                <TextDiv title='卡内余额'></TextDiv>
                                <TextDiv title='操作时间'>{ time}</TextDiv>
                            </div>
                        </div>
                    </CardBox>
                </div>:
                <div>正在收集数据...</div>            
            }   
        </>
    )
}

export default COCdetails;